<template>
    <div class="wetcland-view">
        <template>
            <v-card>
                <v-toolbar color="#FF7043" dark flat>
                    <v-toolbar-title>{{'Wetcland 总览'}}</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <template v-slot:extension>
                        <v-tabs v-model="tab" :grow="true" align-with-title>
                            <v-tabs-slider color="yellow"></v-tabs-slider>
                            <v-tab v-for="item in items" :key="item">
                                {{ item }}
                            </v-tab>
                        </v-tabs>
                    </template>
                </v-toolbar>
                <v-tabs-items v-model="tab">
                    <v-tab-item>
                        <v-card flat>
                            <RankingInfo/>
                        </v-card>
                    </v-tab-item>
                    <v-tab-item>
                        <v-card flat>
                            <WetclandGMInfo/>
                        </v-card>
                    </v-tab-item>
                    <v-tab-item>
                        <v-card flat>
                            <ServerData/>
                        </v-card>
                    </v-tab-item>
                </v-tabs-items>
            </v-card>
        </template>
    </div>
</template>

<script>
    import RankingInfo from "./Wetcland/RankingInfo";
    import WetclandGMInfo from "./Wetcland/WetclandGMInfo";
    import ServerData from "./Wetcland/ServerData";
    export default {
        name: "WetclandView",
        components: {
            RankingInfo,
            WetclandGMInfo,
            ServerData
        },
        data() {
            return {
                tab: '排行榜',
                items: [
                    '排行榜', '全球市场', '数据统计'
                ]
            }
        }
    }
</script>

<style scoped>

</style>
